<template>
	<view class="">
		<view class="place_order">
			<view class="place_order_infos">
				<view class="msgTop">
					{{free_preserve_time_tips}}
				</view>
				<view class="place_order_title">费用信息</view>
				<view class="place_order_items" v-for="(item,index) in cost_detail.cost_list" :key="index">
					<view class="item_lefts">
						<view class="">
							{{item.name}}
						</view>
						<view class="item_desc">
							{{item.desc}}
						</view>
					</view>
					<view class="item_right">{{item.calculation_method}}<text>￥{{item.total_price}}</text></view>
				</view>
			</view>
				<view class="select_seed_head">
					<view class="seed_item" :key="index">
						<image :src="cost_detail.goods.cover_pic" mode=""></image>
						<view class="item_info">
							<view class="item_title">
								{{cost_detail.goods.name}}
							</view>
							<!-- <view class="item_seed_content">
								已选：<text v-for="(it,ind) in attr" :key="ind">{{it.attr_name}}</text>
							</view> -->
							<view class="item_msg">
								<view class="item_price">
									￥{{cost_detail.goods.price}}
								</view>
								
							</view>
						</view>
					</view>
					<view class="place_order_items" v-if="order_type != 0">
						<view class="item_left">重量</view>
						<view class="">
							<view class="item_right1">
								<view class="item_num_head">
									<view class="item_num_icon" @click="attr_num_jian()">
										-
									</view>
									<view class="item_num">
										<input type="digit" v-model="weight" @input="weight_input()" @focus="weight_inputs()"/>
									</view>
									<view class="item_num_icon" @click="attr_num_jia()">
										+
									</view>
								</view>
								Kg
							</view>
							<view class="harvest_weight_head">
								您目前剩余重量： {{cost_detail.harvest_weight}}kg
							</view>
						</view>
						
					</view>
					<view class="place_order_items" v-if="order_type != 0">
						<view class="item_left">运费</view>
						<view class="item_right">￥{{cost_detail.express_price}}</view>
					</view>
			</view>
			
			<view class="place_order_infos" @click="toAddress()" v-if="order_type != 0">
				<view class="place_order_title">收货地址</view>
			
				<view class="address_head" v-if="address.province">
					<view class="address_info">
						<view class="address_name">
							{{ address.name }}<text>{{ address.mobile }}</text>
						</view>
						<view class="address_msg">
							<image src="../static/images/land/address.png" mode=""></image>
							<text>{{ address.province }}{{ address.city }}{{ address.district }}</text>
						</view>
					</view>
					<view class="item_right">></view>
				</view>
				<view class="place_order_items" v-else>
					<view class="item_left">
						<view class="item_title">
							<image src="../static/images/land/address.png" mode=""></image>
						</view>
						<view class="item_content">
							选择收货地址
						</view>
					</view>
					<view class="item_right">请选择></view>
				</view>
			</view>

			<view class="bottom_button_head">
				<view class="bottom_button_heads">
					<view class="bottom_content">
						合计<text>￥{{cost_detail.pay_price}}</text>
					</view>
					<view class="bottom_button" @click="submitOrder()">
						支付
					</view>
				</view>
			</view>

		</view>
		<!-- 	<view class="pay_head">
			<view class="pay_time">
				支付剩余时间14:36
			</view>
			<view class="pay_price">
				￥30.00
			</view>
			<view class="place_order_infos">
				<view class="place_order_title1">推荐支付</view>
				<view class="place_order_items">
					<view class="item_left">
						<view class="item_title">
							<image src="../../images/bg1.jpg" mode=""></image>
						</view>
						<view class="item_content">
							选择收货地址
						</view>
					</view>
					<view class="item_right">请选择></view>
				</view>
				<view class="address_head">
					<view class="address_info">
						<view class="address_name">
							刘<text>152****5565</text>
						</view>
						<view class="address_msg">
							<image src="../../images/bg1.jpg" mode=""></image>
							<text>河南省洛阳市洛龙区洛阳理工学院</text>
						</view>
					</view>
					<view class="item_right">></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import adopt_order from "@/api/livestockAdoption/adopt_order.js";
	export default {
		data() {
			return {
				date: {},
				address:{},
				weight:0,
				order_type:0,
				cost_detail:{},
				free_preserve_time_tips:'',
				template_id: [],
			};
		},
		onLoad(t) {
			var obj = JSON.parse(t.obj)
			this.date = obj.date;
			this.order_type = obj.order_type;
			var template_id = JSON.parse(t.template_id);
			this.template_id = template_id;
			
		},
		onShow() {
			this.get_address();
		},
		filters: {},
		computed: {
			//   0:微信，2:货到付款，3:余额，4:支付宝
			payTypeWord() {
				const Pay_Trans = {
					1: this.$t("common.payMethod1"),
					2: this.$t("common.payMethod2"),
					3: this.$t("common.payMethod3"),
					4: this.$t("common.payMethod4"),
				};
				return Pay_Trans[this.date.pay_type] || null;
			},
		},
		methods: {
			//提交订单
			async submitOrder() {
				if(this.cost_detail.cost_list.length == 0){
					uni.showToast({
						title: '当前未设置费用明细，请联系农场设置明细',
						icon: 'none'
					})
					return;
				}
				if(this.order_type == 1){
					if (!this.address.id) {
						uni.showToast({
							title: '请选择收货地址',
							icon: 'none'
						})
						return;
					}
				}
				var that = this;
				try {
			
					uni.requestSubscribeMessage({
					  tmplIds: that.template_id,
					  complete() {
					    that.submitOrderInfo()
					  },
					});
					
				} catch (e) {
				}
			},
			submitOrderInfo(){
				var submitDataInfo = {
					order_id: this.date.order_id,
					order_type: this.order_type,
					weight: this.weight,
					address_id: this.address.id ? this.address.id : 0,
					payment: this.date.pay_type
				};
				
				adopt_order.submit_cost(submitDataInfo).then((res)=>{
					if (res.code != 0) throw res;
					if (res.code == 0) {
						// 如果是货到付款订单跳转订单列表
						if (submitDataInfo.payment == 2) {
							return this.$utils.toUrl(`/livestockAdoption/my_order/my_order`);
						}
						// 如果是朋友代付跳转代付页面
						if (submitDataInfo.payment == 7) {
							return this.$utils.toUrl(
								`/order/pay-another/pay-another?orderId=${res.data.order_id}`
							);
						}
						let params = {
							url:'adopt_pay',
							payData: {
								pay_type: this.date.pay_type,
								order_id: res.data.order_id,
								order_id_list: res.data.order_id_list || ""
							},
							backUrl: "/livestockAdoption/my_order/my_order",
							pay_type_list: this.pay_type_list,
							pay_price: this.cost_detail.pay_price,
							createDate: res.data.add_time,
						};
						this.$utils.toUrl(
							`/other/pay/pay?data=${JSON.stringify(params)}`,
							"redirectTo"
						);
					}
					
				})
				
			},
			weight_inputs(){
				this.weight = null;
			},
			weight_input(){
				if(this.weight > Math.round(this.cost_detail.harvest_weight)){
					uni.showToast({
						title: '最大重量为'+this.weight+'Kg',
						icon: 'none'
					})
					// this.weight = Math.round(this.cost_detail.harvest_weight)
				}if(this.weight.length>1&&this.weight.indexOf('.') < 0&&this.weight[0] == 0){
					uni.showToast({
						title: '请正确输入重量',
						icon: 'none'
					})
					this.weight = null
				}if(this.weight.length > 3&&this.weight.indexOf('.')!=-1&&this.weight[this.weight.length - 2] != '.'&&this.weight[this.weight.length - 3] != '.'){
					uni.showToast({
						title: '最多输入到小数点后两位',
						icon: 'none'
					})
					this.weight = null
				}else{
					this.get_submit_cost_preview();
				}
			},
			attr_num_jia() {
				if(this.weight == Math.round(this.cost_detail.harvest_weight)){
					uni.showToast({
						title: '已是最大重量',
						icon: 'none'
					})
				}else{
					this.weight = Number(this.weight) + 1;
					this.get_submit_cost_preview();
				}
			},
			attr_num_jian() {
				if (this.weight == 1) {
					uni.showToast({
						title: '已是最小重量',
						icon: 'none'
					})
				} else {
					this.weight = Number(this.weight) - 1 > 0 ? Number(this.weight) - 1 : 0;
					this.get_submit_cost_preview();
				}
			},
			toAddress() {
				uni.navigateTo({
					url: "/user/my/addressmanage?is_order=1",
				});
			},
			//拿到缓存地址
			get_address() {
				var address_id = 0,
					address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
				if (address) {
					this.address = JSON.parse(address)
					address_id = JSON.parse(address).id;
					uni.removeStorageSync("SELECT_ORDER_ADDRESS");
				}
				this.get_submit_cost_preview();
			},
			//采摘
			async get_submit_cost_preview(type) {
				var _from = "mini";
				
				// #ifdef APP-PLUS
				_from = "app";
				// #endif
				
				// #ifdef H5
				_from = "h5";
				// #endif
				
				let reqPayData = {
				  _from,
				  ...this.payData,
				};
				try {
					var params = {
						order_id: this.date.order_id,
						order_type: this.order_type,
						weight: Number(this.weight),
						address_id: this.address.id ? this.address.id : 0,
						_from: _from
					};
					const res = await  adopt_order.submit_cost_preview(params);
					if (res.code == 0) {
						this.cost_detail = res.data.cost_detail;
						this.pay_type_list = res.data.pay_type_list;
						this.free_preserve_time_tips = res.data.free_preserve_time_tips;
					}
				} catch (e) {
				}
			},
		},
	};
</script>

<style scoped>
	.msgTop{
		width: 100%;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		color: #ea1515;
	}
	.harvest_weight_head{
		color: #787878;
		margin-top: 10rpx;
		font-size: 24rpx;
	}
	.item_desc{
		/* margin-left: 20rpx; */
		color: #787878;
	}
	.pay_price {
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 80rpx;
		color: #000000;
		font-weight: 600;
	}

	.pay_time {
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 22rpx;
		color: #666666;
	}

	.pay_head {
		width: 100%;
		/* height: 100vh; */
		background: #f9f9f9;
		padding-bottom: 200rpx;
	}


	.item_num {
		width: 100rpx;
		text-align: center;
		border-left: 1rpx solid #d3d3d3;
		border-right: 1rpx solid #d3d3d3;
	}

	.item_num_icon {
		width: 70rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.item_num_head {
		border-radius: 10rpx;
		border: 1rpx solid #d3d3d3;
	}

	.item_price {
		color: rgb(240, 33, 10);
		font-weight: 600;
		font-size: 34rpx;
	}

	.item_num_head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_msg {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_seed_content {
		color: #939393;
		font-size: 25rpx;
		padding: 20rpx 0;
	}

	.item_title {
		color: #000000;
	}

	.item_info {
		width: 75%;
		margin-left: 20rpx;
	}

	.seed_item image {
		width: 150rpx;
		height: 150rpx;
	}

	.seed_item {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.select_seed_head {
		width: 100%;
		background: #FFFFFF;
		padding: 20rpx 0;
		margin-top: 20rpx;
	}

	.address_msg text {
		color: #7d7d7d;
		font-size: 25rpx;
		margin-left: 20rpx;
	}

	.address_msg image {
		width: 30rpx;
		height: 30rpx;
	}

	.address_msg {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.address_name text {
		margin-left: 20rpx;
	}

	.address_name {
		color: #7d7d7d;
		font-size: 25rpx;
	}

	.address_info {}

	.address_head {
		width: 95%;
		padding: 20rpx 0;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.seed_head_price {
		font-size: 20rpx;
		color: #9c9c9c;
	}

	.seed_head_title {
		margin-left: 15rpx;
		color: #000000;
	}

	.seed_head_img image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 25rpx;
	}

	.seed_head_img {
		display: flex;
		align-items: center;
	}

	.seed_head {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
		padding: 20rpx 0;
	}

	.bottom_button {
		padding: 25rpx 50rpx;
		border-radius: 90rpx;
		color: #FFFFFF;
		background-image: linear-gradient(rgb(85, 177, 85), rgb(111, 215, 72));
	}

	.bottom_content text {
		font-size: 50rpx;
		font-weight: 600;
	}

	.bottom_button_heads {
		width: 95%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
	}

	.bottom_button_head {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.item_rights {
		padding: 10rpx 30rpx;
		border-radius: 90rpx;
		color: #FFFFFF;
		background-image: linear-gradient(rgb(85, 177, 85), rgb(111, 215, 72));
	}
	.item_right1 text {
		color: #000000;
		margin-left: 20rpx;
	}
	.item_right1 {
		color: #6a6a6a;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.item_right text {
		color: #000000;
		margin-left: 20rpx;
	}

	.item_right {
		color: #6a6a6a;
	}

	.item_content text {
		color: #007AFF;
	}

	.item_content {
		color: #6a6a6a;
		margin-left: 40rpx;
	}

	.item_title image {
		width: 30rpx;
		height: 30rpx;
	}

	.item_title {
		color: #000000;
	}
.item_lefts {
		
	}
	.item_left {
		display: flex;
		align-items: center;
	}

	.place_order_items {
		width: 95%;
		height: 100rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* border-bottom: 1rpx solid #d5d5d5; */
	}

	.place_order_item {
		width: 95%;
		height: 100rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.place_order_title2 {
		width: 95%;
		height: 100rpx;
		font-weight: 600;
		font-size: 35rpx;
		margin: auto;
		border-bottom: 1rpx solid #d5d5d5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.place_order_title1 {
		width: 95%;
		height: 100rpx;
		font-weight: 600;
		font-size: 35rpx;
		margin: auto;
		line-height: 100rpx;
		border-bottom: 1rpx solid #d5d5d5;
	}

	.place_order_title {
		width: 95%;
		height: 100rpx;
		font-weight: 600;
		font-size: 35rpx;
		margin: auto;
		line-height: 100rpx;
	}

	.place_order_infos {
		width: 100%;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	.place_order_info {
		width: 100%;
		background: #FFFFFF;
	}

	.place_order {
		width: 100%;
		height: 100vh;
		background: #f9f9f9;
		padding-bottom: 200rpx;
	}
</style>
